<template>
    <div class="contain">
        <div class="logo">
            <h2>简途论坛用户注册</h2>
        </div>
        <div class="main">
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" size='medium'>
                <el-form-item label="用户姓名" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="登录密码" prop="pass">
                    <el-input type="password" v-model="ruleForm.pass" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPass">
                    <el-input type="password" v-model="ruleForm.checkPass" auto-complete="off"></el-input>
                </el-form-item>
                 <el-form-item prop="tel" label="手机号">
                      <el-input type="tel"  v-model="ruleForm.tel" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item prop="email" label="邮箱">
                      <el-input type="email"  v-model="ruleForm.email" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item prop="position" label="职位">
                      <el-input type="text"  v-model="ruleForm.position" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-radio-group v-model="ruleForm.sex">
                    <el-radio label="男"></el-radio>
                    <el-radio label="女"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item class="set-btn">
                    <el-button type="primary" @click="submitForm('ruleForm')">注册</el-button>
                    <el-tooltip class="item" effect="dark" content="不想注册，继续前往首页!" placement="bottom">
                       <el-button @click="backHome">首页</el-button>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="已有账号，就去登录吧!" placement="bottom">
                       <el-button @click="goLogin">登录</el-button>
                    </el-tooltip>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import axios from "axios";
import { mapState, mapMutations } from "vuex";
export default {
  name: "register",
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    var validateTel = (rule, value, callback) => {
          var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;  
          if(value === ''){
            callback(new Error("请输入手机号"));
          }else if(!myreg.test(value)){
               callback(new Error("请输入正确的手机号码！"));
          }else{
            callback();
          }
    }
    var validateName = (rule,value,callback) =>{
        if(value){
          axios.get('/userApl/users/username/'+value)
            .then(function (response) {
              if(response.data.code !== 0){
                callback(new Error("用户名重复"));
              }else{
                callback();
              }
            })
            .catch(function (error) {
              console.log(error);
            });
        }else{
          callback(new Error("请输入用户名!"));
        }
    }
    return {
      ruleForm: {
        name: "",
        pass: "",
        checkPass: "",
        sex: "",
        email: "",
        position: "",
        tel:"",
        nickname:""
      },
      rules: {
        name: [
          { required: true,validator: validateName, trigger: "blur" }
        ],
        pass: [
          { required: true, validator: validatePass, trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        tel: [
          { required: true, validator: validateTel, trigger: ["blur","change"] }
        ],
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          { type: "email", message: "请输入正确的邮箱地址",trigger: ["blur"]}
        ],
        position: [{ required: true, message: "请输入职位", trigger: "blur" }],
        checkPass: [
          { required: true, validator: validatePass2, trigger: "blur" }
        ],
        sex: [{ required: true, message: "请选择性别", trigger: "blur" }]
      }
    };
  },
  methods: {
    submitForm(formName) {
      let  _this = this;
      if(this.ruleForm.sex){
        this.ruleForm.sex = this.ruleForm.sex == '男'?"female":"male";
      }
      let backData = {
        email:this.ruleForm.email,
        gender:this.ruleForm.sex,
        username:this.ruleForm.name,
        position:this.ruleForm.position,
        password:this.ruleForm.pass,
        mobilePhone:this.ruleForm.tel,
        nickname:this.ruleForm.nickname,
      };
      this.$refs[formName].validate(valid => {
        if (valid) {
          axios  
            .post("/userApl/users", backData)
            .then(function(response) {
              if (response.data.code == 0) {
                  _this.$message({
                    message: response.data.msg,
                    type: 'success',
                    duration:800
                  });
                  setTimeout(() => {
                       _this.$router.push("login");
                  },1000);
                 
              } else {
                _this.$message.error("注册失败！！！");
              }
            })
            .catch(function(error) {
              console.log(error);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    backHome() {
      this.$router.push("home");
    },
    goLogin() {
      this.$router.push("login");
    }
  }
};
</script>

<style scoped   lang="scss">
.contain {
  width: 500px;
  min-height: 560px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 5px 1px #8e8686;
  .logo {
    h2 {
      margin-top: 35px;
      text-align: center;
    }
  }
  .main {
    width: 400px;
    min-height: 155px;
    position: absolute;
    top: 58%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>